<template>
    <div class="login_container">
        <div class="login_box">
            <!-- nice-logo -->
            <div class="nice-logo">
                <img src="../../assets/images/logo-b.png" />
            </div>
            <!-- 标题 -->
            <div class="title">
                CloudMusic
            </div>
            <!-- 登录表单 -->
            <el-form
                :model="loginForm"
                :rules="loginFormRules"
                ref="loginFormRef"
                class="login_form"
            >
                <el-form-item prop="phone">
                    <el-input
                        v-model="loginForm.phone"
                        placeholder="请输入网易云音乐手机号"
                        prefix-icon="iconfont nicephone2"
                    ></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input
                        type="password"
                        v-model="loginForm.password"
                        placeholder="请输入密码"
                        prefix-icon="el-icon-lock"
                    ></el-input>
                </el-form-item>
                <el-form-item class="btn">
                    <el-button
                        type="primary"
                        @click="login"
                    >登 录 </el-button>
                    <el-button
                        type="info"
                        @click="resetLoginForm"
                    >重 置 </el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import { mapMutations } from 'vuex'

export default {
    data() {
        return {
            // 表单的数据绑定对象
            loginForm: {
                phone: '18234144353',
                password: '121718l,'
            },
            // 表单的校验规则
            loginFormRules: {
                phone: [
                    { required: true, message: '请输入网易云音乐手机号', trigger: 'blur' },
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                ]
            }
        }
    },
    created() {

    },
    methods: {
        // 重置表单
        resetLoginForm() {
            this.$refs.loginFormRef.resetFields();
        },
        login() {
            // 判断表单校验是否成功
            this.$refs.loginFormRef.validate(async valid => {
                if (!valid) {
                    return
                }
                // 调用登录接口
                const { data: res } = await this.$api.loginApi(this.loginForm)
                // console.log(res);
                if (res.code !== 200) {
                    return this.$message.error('登录失败！')
                }
                // this.$message.success('登录成功！')
                this.getUserDetail(res.profile.userId)
                localStorage.setItem('cookie', res.cookie)
                localStorage.setItem('token', res.token)
                localStorage.setItem('loginStatu', true)
                this.setLoginStatu(true)
            })
        },
        // 获取个人信息
        async getUserDetail(uid) {
            const { data: res } = await this.$api.getUserDetail(uid)
            // console.log(res);
            if (res.code !== 200) {
                return this.$message.error('登录失败！')
            }
            let userInfo = res.profile
            userInfo.level = res.level
            userInfo.listenSongs = res.listenSongs
            userInfo.createTime = res.createTime
            userInfo.createDays = res.createDays
            localStorage.setItem('userInfo', JSON.stringify(userInfo))
            this.setUserInfo(res.profile)
            this.$message.success('登录成功！')
            this.$router.push('/home');
        },
        ...mapMutations({
            setUserInfo: 'SET_USERINFO',
            setLoginStatu: 'SET_LOGINSTATU'
        })
    },
}
</script>

<style lang="less" scoped>
.login_container {
    width: 100%;
    height: 100%;
    // background: #00d8cb url(../../assets/images/newbg1.png) center bottom
    //     no-repeat;
    // background-image: linear-gradient(to right, #c4e759 0%, #6de195 100%);
    background-image: linear-gradient(90deg, #fbc2eb, #b9d1fa);
    height: 100%;
    .login_box {
        width: 350px;
        height: 486px;
        // //水平垂直居中
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: #fff url(../../assets/images/logbg.jpg) bottom no-repeat;
        border-radius: 10px;
        box-shadow: 1px 2px 15px rgba(0, 0, 0, 0.3);
        .nice-logo {
            width: 60px;
            height: 60px;
            margin: 40px auto 0;
            img {
                width: 100%;
                height: 100%;
            }
        }

        .title {
            position: absolute;
            top: 110px;
            left: 50%;
            transform: translate(-50%);
            color: #888;
        }
        .login_form {
            width: 100%;
            position: absolute;
            top: 35%;
            padding: 0 30px;
            box-sizing: border-box;
            .btn {
                margin-left: 70px;
                .el-button {
                    border: none;
                }
                .el-button:first-child {
                    background-color: #00d8cb;
                }
            }
        }
    }
}
</style>